<template>
  <div>
    <van-field
    style="margin-top: 30px"
      v-model="industry"
      is-link
      readonly
      label="所属行业"
      placeholder="请选择所属行业"
      @click="showIndustry = true"
    />
    <van-popup v-model="showIndustry" position="bottom">
      <van-picker
        title="选择查询条件"
        show-toolbar
        :columns="industryCols"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <van-field
      v-model="enterprise"
      is-link
      readonly
      label="企业规模"
      placeholder="请选择企业规模"
      @click="showEnterprise = true"
    />
    <van-popup v-model="showEnterprise" position="bottom">
      <van-picker
        title="选择条件查询"
        show-toolbar
        :columns="enterpriseCols"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <van-field
      v-model="transaction"
      is-link
      readonly
      label="交易规模"
      placeholder="请选择交易规模"
      @click="showTransaction = true"
    />
    <van-popup v-model="showTransaction" position="bottom">
      <van-picker
        title="选择关联关系"
        show-toolbar
        :columns="transactionCols"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <van-button type="info" block style="width: 90%; margin: 100px auto">查询</van-button>
  </div>
</template>

<script>
import Vue from "vue";
import { Picker, Popup } from "vant";

Vue.use(Picker);
Vue.use(Popup);

export default {
  data() {
    return {
      industry: "",
      enterprise: "",
      transaction: "",
      showIndustry: false,
      showEnterprise: false,
      showTransaction: false,
      industryCols: ["不限", "C", "F", "G"],
      enterpriseCols: ["不限", "1-49", "50-99", "99-499", ">500"],
      transactionCols: ["不限", "小", "中", "大"],
    };
  },
  methods: {
    onConfirm(value, index) {
    },
    onChange(picker, value, index) {
    },
    showPopup() {
      this.show = true;
    },
    onCancel() {
      this.showIndustry = false;
      this.showEnterprise = false;
      this.showTransaction = false;
    },
  },
};
</script>
